import { FC, useState, useEffect, useMemo } from 'react';
import LittleTitle from '@/pages/company/components/LittleTitle';
import InlineTitle from '@/pages/company/components/InlineTitle';
import InSelect from '@/components/InSelect';
import Image from '@/components/Image';
import { Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import DatePicker from '@/components/DatePicker';
import Line from '@/components/Line';
import styles from './style.less';

import icon1 from '@/assets/qyhx/manage/icon1.png';
import icon2 from '@/assets/qyhx/manage/icon2.png';
import icon3 from '@/assets/qyhx/manage/icon3.png';
import icon4 from '@/assets/qyhx/manage/icon4.png';
import icon5 from '@/assets/qyhx/manage/icon5.png';
import SimpleList from '@/components/SimpleList';

import { useModel } from 'umi';
const iconList = [icon1, icon2, icon3, icon4, icon5];

const companyColumns = [
  {
    dataIndex: 'name',
    title: '指数分类',
    width: 220,
  },
  {
    dataIndex: 'val',
    title: '指数值（亿）',
    width: 130,
  },
  {
    dataIndex: 'hb',
    title: '环比值',
    width: 100,
  },
  {
    dataIndex: 'tb',
    title: '同比',
    width: 100,
  },
  {
    dataIndex: 'date',
    title: '日期',
    width: 130,
  },
];
const Manage: FC = () => {
  const { manageData, getManageData, manageInfo, getManageInfo } =
    useModel('company');
  const [dates, setDates] = useState<any>(undefined);
  const [type, setType] = useState<any>(1);
  const [cycle, setCycle] = useState<any>(1);
  const toGetManageData = () => {
    const id = window.sessionStorage.getItem('companyId') || '';
    let beginDate = '';
    let beginEnd = '';
    if (dates) {
      beginDate = dates[0] || '';
      beginEnd = dates[1] || '';
    }
    getManageData({
      id,
      beginDate,
      beginEnd,
      type,
      index: cycle,
    });
  };
  useEffect(() => {
    const id = window.sessionStorage.getItem('companyId') || '';
    getManageInfo({ id });
    toGetManageData();
  }, []);

  const infoList = useMemo(() => {
    if (manageInfo && manageInfo.length > 0) {
      return manageInfo.map((item: any, index: number) => ({
        icon: iconList[index],
        value: item?.val || 0,
        unit: item?.danWei || '',
        title: item?.title || '',
        compare:
          item?.data?.val && item?.data?.danWei
            ? `${item.data.val}${item.data.danWei}`
            : '0',
      }));
    }
    return [];
  }, [manageInfo]);

  return (
    <div className={styles.container}>
      <div className={styles.info}>
        <LittleTitle title={'企业经营信息'} />
        <section className={styles.info_main}>
          {infoList.map((item: any) => (
            <div key={item.title}>
              <Image src={item.icon} />
              <div>
                <p className={styles.info_value}>
                  <span>{item.value}</span>
                  <span>{item.unit}</span>
                </p>
                <p>{item.title}</p>
                <p>
                  <span>同比：</span>
                  <span className={styles.green}>{item.compare}</span>
                </p>
              </div>
            </div>
          ))}
        </section>
      </div>
      <div className={styles.entData}>
        <div className={styles.top_wrap}>
          <LittleTitle title={'企业经营大数据分析'} />
          <div className={styles.top_main}>
            <span>指标类型：</span>
            <DatePicker
              type={'range'}
              style={{ width: 300 }}
              value={dates}
              onChange={(v: any) => setDates(v)}
            />
            <span>指标类型：</span>
            <InSelect
              options={[
                {
                  label: '产值',
                  value: 1,
                },
                {
                  label: '营业收入',
                  value: 2,
                },
                {
                  label: '能源消耗',
                  value: 3,
                },
                {
                  label: '利润总额',
                  value: 4,
                },
                {
                  label: '用工人数',
                  value: 5,
                },
              ]}
              placeholder="请选择"
              value={type}
              onChange={(v: any) => setType(v)}
            />
            <span>指标周期：</span>
            <InSelect
              options={[
                {
                  label: '月指数',
                  value: 1,
                },
                {
                  label: '年指数',
                  value: 0,
                },
              ]}
              placeholder="请选择"
              value={cycle}
              onChange={(v: any) => setCycle(v)}
            />
          </div>
          <div>
            <Button
              style={{ marginRight: 10 }}
              onClick={() => {
                setCycle(1);
                setType(1);
                setDates(undefined);
              }}
            >
              重置
            </Button>
            <Button
              icon={<SearchOutlined style={{ color: '#35aaff' }} />}
              onClick={() => toGetManageData()}
            >
              查询
            </Button>
          </div>
        </div>
        <section className={styles.dataDetail}>
          <div>
            <InlineTitle title={'营业收入走势图'} />
            <Line
              width={880}
              height={390}
              legend={{ bottom: 0 }}
              category={manageData?.chartData?.names || []}
              dataSource={manageData?.chartData?.values || []}
            />
          </div>
          <div>
            <InlineTitle title={'营业收入数据表'} />
            <SimpleList
              columns={companyColumns}
              dataSource={manageData?.dataTableData?.data || []}
              hover
              width={880}
              height={390}
            />
          </div>
        </section>
      </div>
    </div>
  );
};
export default Manage;
